<!doctype html>
<html>
  <head>
		<title>手势放大缩小</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style>
			#frame {
				width:100px;
				height:100px;
				background:#ccc;
			}
		</style>
  </head>
  <body>
    <header>
    </header>
		<div id="main">
			<div id="frame"></div>
		</div>
    <footer>
    </footer>
		<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
		<script>
		var width = 100, height = 100;
		var node = document.getElementById('frame');
		node.ongesturechange = function(e){
			var node = e.target;
			// scale and rotation are relative values,
			// so we wait to change our variables until the gesture ends
			node.style.width = (width * e.scale) + "px";
			node.style.height = (height * e.scale) + "px";
		}
		node.ongestureend = function(e){
			// Update the values for the next time a gesture happens
			width *= e.scale;
			height *= e.scale;
		}
		</script>
	</body>
</html>